import React from 'react';
import MetricsTable from './MetricsTable';
import ConfusionMatrix from './ConfusionMatrix';
import { AppState } from '../../types';

interface EvaluationTabProps {
  model: AppState['model'];
}

const EvaluationTab: React.FC<EvaluationTabProps> = ({ model }) => {
  const { evaluationMetrics, confusionMatrix } = model;
  
  if (!evaluationMetrics || !confusionMatrix) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-center">
          <p className="text-gray-500 mb-4">No evaluation data available yet</p>
          <p className="text-sm text-gray-400">
            Go to the Data Input tab and click "Analyze & Predict" to generate evaluation results
          </p>
        </div>
      </div>
    );
  }
  
  return (
    <div className="space-y-6 p-4">
      <div className="grid gap-6 lg:grid-cols-2">
        <MetricsTable metrics={evaluationMetrics} />
        <ConfusionMatrix matrix={confusionMatrix} />
      </div>
    </div>
  );
};

export default EvaluationTab;